<template>
	<view class="searchPage">
		<view class="top">
			<!-- 搜索栏 -->
			<uni-search-bar placeholder="请输入食物名称查找" bgColor="#FFF" clearButton="auto" v-model="searchValue"
				cancelButton="none" @blur="search" />
		</view>
		<view class="center">
			<ppc-food-card @click="foodClick" :dataSource="data"></ppc-food-card>
		</view>
		<ppc-loading v-if="loading" :isSmall="true"></ppc-loading>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import ppcFoodCard from '/components/ppcFoodCard.vue'
	import ppcLoading from '/components/ppcLoading.vue'
	//搜索内容
	const searchValue = ref()
	//判断是否触底
	const isBottom = ref(false)
	//当前页数
	const currentPage = ref(1)
	//每页显示的条数
	const pageSize = ref(10)
	// 食物信息
	const data = ref([])
	const loading = ref(false)
	//滑动到底部
	const lowerBottom = () => {
		if (!isBottom.value) {
			currentPage.value += 1
			getCloudFoodData()
		}
	}
	//搜索事件
	const search = () => {
		getCloudFoodData()
	}
	//从服务器获取食物信息
	const getCloudFoodData = (status = 1) => {
		loading.value = true
		proxy.$http('getFood', {
			status: status,
			currentPage: currentPage.value,
			pageSize: pageSize.value
		}).then(res => {
			if (res.result.code === 200) {
				data.value = [...data.value, ...res.result.data.data]
			}
			if (res.result.data.affectedDocs < pageSize.value) {
				isBottom.value = true
			}
			loading.value = false
		})
	}
	//点击食物
	const foodClick = () => {

	}
</script>

<style lang="scss">
	.searchPage {
		.center {
			margin: 0 20rpx;
		}
	}
</style>